<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Markdown示例</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="https://mirror.fe80.cn/highlight.js/11.9.0/styles/vs2015.min.css">
    <!-- <link rel="stylesheet" href="https://mirror.fe80.cn/github-markdown-css/5.1.0/github-markdown.min.css"> -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="preview" class="markdown-body"></div>
  <script src="https://mirror.fe80.cn/markdown-it/12.3.2/markdown-it.min.js"></script>
  <script src="https://mirror.fe80.cn/highlight.js/11.9.0/highlight.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
    // 配置Markdown解析器
    const md = window.markdownit({
        html: true,
        highlight: function (str, lang) {
            try {
                if (lang && hljs.getLanguage(lang)) {
                    return `<pre class="hljs"><code>${hljs.highlight(str, { 
                        language: lang, 
                        ignoreIllegals: true 
                    }).value}</code></pre>`;
                }
                return `<pre class="hljs"><code>${hljs.highlightAuto(str).value}</code></pre>`;
            } catch (e) {
                return `<pre><code>${str}</code></pre>`;
            }
        },
        render: {
            // blockquote: (tokens, idx, options, env, self) => {
            //     const token = tokens[idx];
            //     // 添加自定义类名 "custom-blockquote"
            //     return `<blockquote class="custom-blockquote">${self.renderInline(token.children, options, env)}</blockquote>\n`;
            // }
            blockquote_open: (tokens, idx, options, env, self) => {
                const token = tokens[idx];
                const contentToken = tokens[idx + 1];
                
                // 检测 [!type] 格式
                const match = contentToken.content.match(/^\[\!([^\]]+)\]/);
                if (match) {
                    const type = match[1].toLowerCase().trim();
                    // 移除标记内容
                    contentToken.content = contentToken.content.replace(match[0], '').trim();
                    // 添加对应的类名
                    return `<blockquote class="custom-blockquote ${type}-blockquote">`;
                }
                
                // 默认情况
                return '<blockquote class="custom-blockquote">';
            },
            blockquote_close: () => {
                return '</blockquote>';
            }
        }
    });

    // 添加插件来修改blockquote
    // md.use(function(md) {
    //     const defaultRender = md.renderer.rules.blockquote_open || 
    //         function(tokens, idx, options, env, self) {
    //             return self.renderToken(tokens, idx, options);
    //         };
        
    //     md.renderer.rules.blockquote_open = function(tokens, idx, options, env, self) {
    //         console.log(tokens[idx], options, env, self);
    //         tokens[idx].attrJoin('class', 'custom-blockquote');
    //         return defaultRender(tokens, idx, options, env, self);
    //     };
    // });

    // 渲染处理
    fetch('content.md').then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.text();
    })
    .then(data => {
        // 将原始内容按行拆分并存储到 env 中
        const env = { rawLines: data.split('\n') };
        // 处理内容逻辑...
        // 覆盖 blockquote 渲染规则
        md.renderer.rules.blockquote_open = (tokens, idx, options, env, self) => {
            const token = tokens[idx];
            const contentToken = tokens[idx + 1];
            console.log("原始数据：",env);

            // 获取原始行字符串
            const rawLine = env.rawLines ? env.rawLines[token.map[0]] : null;
            console.log("原始行字符串:", rawLine);
            
            // 检测 [!type] 格式
            const match = contentToken.content.match(/^\[\!([^\]]+)\]/);
            if (match) {
                const type = match[1].toLowerCase().trim();
                // 移除标记内容
                contentToken.content = contentToken.content.replace(match[0], '').trim();
                // 添加对应的类名
                return `<blockquote class="custom-blockquote ${type}-blockquote">`;
            }
            
            // 默认情况
            return '<blockquote class="custom-blockquote">';
        };

        document.getElementById('preview').innerHTML = md.render(data);
    })
    .catch(error => {
        console.error('请求失败:', error);
        // 显示错误提示
        Swal.fire('错误', '无法加载文件', 'error');
    });
    // 二次高亮保障
    if (typeof hljs !== 'undefined') {
        hljs.highlightAll();
    }
});
</script>
</body>
</html>